<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="guacamole.css"/>
    <title>Guacamole (EXAMPLE)</title>
</head>

<body>
<h1>pancm Guacamole</h1>
<!-- Display -->
<div id="display"></div>

<!-- Guacamole JavaScript API -->
<script type="text/javascript"
        src="guacamole-common-js/all.min.js"></script>

<!-- Init -->
<script type="text/javascript"> /* <![CDATA[ */

// Get display div from document
var display = document.getElementById("display");

// Instantiate client, using an HTTP tunnel for communications.
// httl方式
var guac = new Guacamole.Client(
    new Guacamole.HTTPTunnel("tunnel")
);
// WebSocket 方式
var guac = new Guacamole.Client(
    new Guacamole.WebSocketTunnel("ws://192.168.101.8:7777/tunnel/ws")
);

// Add client to display div
display.appendChild(guac.getDisplay().getElement());

// Error handler
guac.onerror = function(error) {
    alert(error);
};

// Connect
guac.connect();

// Disconnect on close
window.onunload = function() {
    guac.disconnect();
}

// Mouse
var mouse = new Guacamole.Mouse(guac.getDisplay().getElement());

mouse.onmousedown =
    mouse.onmouseup   =
        mouse.onmousemove = function(mouseState) {
            guac.sendMouseState(mouseState);
        };

// Keyboard
var keyboard = new Guacamole.Keyboard(document);

keyboard.onkeydown = function (keysym) {
    guac.sendKeyEvent(1, keysym);
};

keyboard.onkeyup = function (keysym) {
    guac.sendKeyEvent(0, keysym);
};

/* ]]> */ </script>

</body>

</html>